<template>
  <div class="topbar_back">
    <router-link :to="{name: backUrl}">
      <div class="left">
        <img class="icon" :src="backIcon">
        <span class="text">{{backContent}}</span>
      </div>
    </router-link>
    <div class="center">
        <span class="text" :class="{text_green: contentColor === 'green'}" v-if="isShowCenter === 'true'">
          {{centerContent}}
        </span>
    </div>
  </div>
</template>

<script>
import backIcon from '../../assets/img/icon/personal_homepage_btn_bac.svg'
export default {
  name: 'topbar_back',
  props: ['backUrl', 'backContent', 'centerContent', 'contentColor', 'isShowCenter'],
  data () {
    return {
      backIcon: backIcon
    }
  }
}
</script>

<style lang="scss" scoped>
  .topbar_back{
    width: 100%;
    height: px2rem(44);
    background-color: #FFF;
    /*border: px2rem(2) solid black;*/
    position: relative;
    .left{
      width: 40%;
      height: px2rem(44);
      /*border: px2rem(2) solid red;*/
      position: absolute;
      top: 0;
      left: px2rem(20);
      z-index: 1;
      .icon{
        width: px2rem(46);
        height: px2rem(44);
      }
      .text{
        position: absolute;
        top: 0;
        left: px2rem(18);
        color: $text-color;
        font-size: $text-size-normal;
        line-height: px2rem(44);
      }
    }
    .center{
      width: 40%;
      height: px2rem(44);
      /*border: px2rem(2) solid red;*/
      /*float: left;*/
      text-align: center;
      margin: 0 auto;
      .text{
        display: block;
        width: 100%;
        /*border: px2rem(2) solid black;*/
        color: $text-color;
        font-size: $text-size-imp;
        font-weight: bold;
        line-height: px2rem(44);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .text_green{
        color: #20965B;
      }
    }
  }
</style>
